<template>
  <view class="custom-bar" :style="{ background: props.bgColor, height: state.height + 'px' }">
    <!-- #ifdef MP-WEIXIN -->
    <view class="header" :style="{ marginTop: state.marginTop + 'px', height: '32px' }">
      <view class="left-block">
        <uni-icons type="back" size="24" :color="props.titleColor" @tap="backPage" v-if="props.isBack"></uni-icons>
      </view>
      <view class="title" :style="{ color: props.titleColor }">{{ props.title }}</view>
      <view class="right-text" @tap="props.handle">{{ props.rightText }}</view>
    </view>
    <!-- #endif -->

    <!-- #ifdef APP-PLUS -->
    <view class="header" :style="{ marginTop: state.marginTop + 'px', height: '44px' }">
      <view class="left-block">
        <uni-icons type="back" size="24" :color="props.titleColor" @tap="backPage" v-if="props.isBack"></uni-icons>
      </view>
      <view class="title" :style="{ color: props.titleColor }">{{ props.title }}</view>
      <view class="right-text" @tap="props.handle">{{ props.rightText }}</view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script lang="ts" setup>
  // @ts-nocheck
  import { reactive, onMounted } from 'vue';

  const state = reactive({
    height: 0,
    width: 0,
    marginTop: 0,
  });

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    rightText: {
      type: String,
      default: '',
    },
    bgColor: {
      type: String,
      default: '#FFF',
    },
    isBack: {
      type: [Boolean, String],
      default: true,
    },
    bgImage: {
      type: String,
      default: '',
    },
    handle: {
      type: Function,
      default: () => {},
    },
    titleColor: {
      type: String,
      default: '#333',
    },
  });

  onMounted(() => {
    let custom: any = {};
    // #ifdef MP-WEIXIN
    custom = wx.getMenuButtonBoundingClientRect();
    // #endif

    const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 4;

    uni.getSystemInfo({
      success: (res) => {
        // #ifdef MP-WEIXIN
        state.width = res.windowWidth - 94;
        // #endif
        // #ifdef APP-PLUS
        state.width = res.windowWidth;
        // #endif
        state.height = custom.top ? custom.bottom + 8 : res.statusBarHeight + 44;
        state.marginTop = custom.top ? statusBarHeight : res.statusBarHeight;
      },
    });
  });

  const backPage = () => {
    uni.navigateBack({
      delta: 1,
    });
  };
</script>

<style lang="scss" scoped>
  .custom-bar {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1314;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 8rpx;
      .left-block {
        height: 32px;
        display: flex;
        align-items: center;
      }
      .title {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .right-text {
        width: 24px;
        height: 32px;
        font-size: 24rpx;
      }
    }
  }
</style>
